import React, { Component } from 'react';
import { Modal, Carousel, Button } from 'antd';
import styles from './index.less';
import { setInterval } from 'timers';

class SyCarouselImageModalComponent extends Component {

  state = {
  };

  /********************************* render *********************************/

  _index = 0;
  renderImage(value) {
    this._index++;
    return (
      <img key={this._index} src={value.src} />
    )
  }



  render() {
    const { values, visible, onCancel } = this.props;

    return (
      // <div>
      //   <div className={styles.imageModal} style={{ width: '900px', display: (visible ? 'none' : 'block') }} >
      //     <Carousel effect="fade" arrows={true}  style={{  display: (visible ? 'none' : 'block') }}  >

      //       <img src="http://aiqianqian.zhiwuke.com/2017_11_23/1511420208249_ua22re2p.jpg" />
      //       <img src="http://aiqianqian.zhiwuke.com/2017_11_23/1511420209603_l8mh8sk2.jpg" />
      //       <img src="http://aiqianqian.zhiwuke.com/2017_11_23/1511420225607_iy4z9ml6.jpg" />
      //     </Carousel>
      //   </div>
      //   <Button onClick={onCancel} >
      //     aa
      // </Button>
      // </div>
      <Modal
        className={styles.imageModal}
        visible={visible}
        onCancel={onCancel}
        footer={false}
        closable={false}
        style={{ padding: "0px" }}
        destroyOnClose={true}
      >
        <Carousel effect="fade" arrows={values.length != 1} dots={values.length != 1}  >
          {
            values.map(value => this.renderImage(value))
          }
        </Carousel>

      </Modal>

    );
  }
}

export default SyCarouselImageModalComponent;
